import './index.less'

import React, { useRef, useState, forwardRef, useImperativeHandle } from 'react'
import { LdhPage, LdhPageBody } from '@biz/PageCompnents'
import AFilter from '@/components/AFilter'
import ATable from '@/components/ATable'
import { Button } from 'antd'

const ATablePage = forwardRef((props, ref) => {
  const {
    filter: { filterList = [], column = 3 },
    table: {
      request,
      columns = [],
      bordered = true,
      listKey = '',
      initData = [],
    },
    actionList = [],
    pageTitle = '',
    className = '',
  } = props
  const tableRef = useRef()

  const [tableRequest, setRequest] = useState({ ...request })
  const onHandleSearch = (values) => {
    setRequest((pre) => ({
      ...pre,
      params: {
        ...values,
      },
    }))
  }

  useImperativeHandle(ref, () => ({
    tableRefresh() {
      tableRef.current?.tableRefresh()
    },
  }))

  return (
    <LdhPage className={className} title={pageTitle}>
      {filterList?.length > 0 && (
        <AFilter
          filterList={filterList}
          column={column}
          onHandleSearch={onHandleSearch}
        />
      )}
      <LdhPageBody>
        {actionList?.length > 0 && (
          <div className="action-list-box">
            {actionList?.map((action, index) => {
              return (
                <Button
                  type="primary"
                  variant="solid"
                  onClick={action?.onClick}
                  key={index}
                >
                  {action?.label || ''}
                </Button>
              )
            })}
          </div>
        )}
        <ATable
          ref={tableRef}
          columns={columns}
          bordered={bordered}
          request={tableRequest}
          listKey={listKey}
          initData={initData}
        />
      </LdhPageBody>
    </LdhPage>
  )
})

export default ATablePage
